<template>
  <el-header>
    <el-menu
        :default-active="activeIndex"
        class="HomeChoose"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        router
    >
      <el-menu-item index="0">
        <img
            style="width: 60px"
            src="../logo.png"
            alt="SC logo"
        />
      </el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="home"><el-icon><House /></el-icon>首页</el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name" >
        <template #title><el-icon><component :is="item.icon"></component></el-icon>
          <span>{{item.name}}</span></template>
        <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name" >
          <el-icon><component :is="child.icon"></component></el-icon>{{child.name}}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="announcement"><el-icon><Help /></el-icon>我的消息</el-menu-item>
      <el-menu-item index="3"><el-icon><Phone /></el-icon>联系我们</el-menu-item>

      <div class="IDpicture">
        <el-input class="searchFunction" placeholder="请输入">
          <template #suffix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div>
    </el-menu>
    <el-main>
      <div class="issue-title"><h2>报事维修</h2></div>
      <div class="maintenance-box">
        <el-form ref="form" :model="maintainform" label-width="80px">
          <el-form-item label="事项类型">
            <el-select v-model="maintainform.maintainType" placeholder="请选择" >
              <el-option label="维修" value="维修" ></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="期望时间">-->
          <!--            <el-select v-model="form.eventtime" placeholder="请选择时间">-->
          <!--              <el-option label="12小时之内" value=" shanghai"></el-option>-->
          <!--              <el-option label="一日之内" value="beijing"></el-option>-->
          <!--              <el-option label="三日之内" value=" shanghai"></el-option>-->
          <!--              <el-option label="五日之内" value="beijing"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="地点描述">
            <el-input type="textarea" v-model="maintainform.maintainArea" ></el-input>
          </el-form-item>
          <el-form-item label="事项介绍">
            <el-input type="textarea" v-model="maintainform.maintainDescribe" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="upload-section">
        <h2>图片上传</h2>
        <el-upload
            class="avatar-uploader"
            name="imageFile"
            action="/api/upload/image"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <!--图片回显-->
          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="height: 200px;width: 200px" />
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
<!--          <i class="el-icon-upload"></i>-->
<!--          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
      </div>
    </el-main>


  </el-header>
</template>


<script setup>
import {ref, reactive, onMounted} from 'vue'
import *as maintain from '../api/maintenance'
import { ElMessage } from 'element-plus';
import {useRouter} from "vue-router";
import {useStore} from "vuex"; // 假设你使用了Element Plus的message组件，确保先导入
import *as announcement from'../api/announcement-management'
import { Plus } from '@element-plus/icons-vue'
const activeIndex = ref('1')
//页头多级菜单
const store = useStore();
const imageUrl=ref('')
const handleAvatarSuccess=(res)=>{
  //图片上传成功，接收返回值，把图片路径设置到imageUrl变量中，回显
  console.log(res)
  imageUrl.value=res.data
}

const maintainform = reactive({
  maintainType:'',// 初始化region字段
  maintainArea: '',// 如果有其他字段，也在这里初始化
  maintainDescribe: '',
  userId:store.getters.getId,
  name:store.getters.getUsername,
  maintainUrl:imageUrl
});
const router = useRouter();


//上传图片

onMounted(()=>{
  if(store.getters.getId==0)
  {
    alert('请登录')
    router.push('/home')
  }
})

const submitForm = () => {
  console.log(maintainform);
  const maintainForm = { ...maintainform };
  maintain.maintain_add(maintainForm).then(res => {
    console.log(res);
    ElMessage.success('提交成功！');
    // 可以在此处添加额外的操作，如页面跳转
  }).catch(error => {
    console.error('提交失败:', error);
    ElMessage.error('提交失败，请重试！');
  });
  const notice = {
    noticeText: maintainForm.name+"的报事已提交，请等待物业回复",
    userId: maintainForm.userId,
    noticeType: "报事提交"
  }
  announcement.announcement_add(notice).then((res=>{
    alert("提交成功")

  }))


};
const resetForm = (formName) => {
  const formRef = ref(null); // 同样，确保在模板中对formRef进行了绑定
  formRef.value.resetFields();
};

const menu_data=ref([

  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/index/Shopping',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/Order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },
])
</script>

<style scoped>
.el-header {
  height: 10%; /* 使顶级表头header部分占整个屏幕的10% */
}

.el-main {
  height: 90%; /* 剩余部分为main，占90% */
  display: flex;
  flex-direction: row; /* 设置主轴为水平方向 */
}
.issue-title {
  text-align: left;
  margin-left: 200px;
  margin-bottom: 20px; /* 可选，为下部内容添加一些间距 */
}
.maintenance-box {
  width: 500px;
  height: 500px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border-radius: 4px; /* 给盒子添加圆角 */
  border: 1px solid #DCDFE6;
  background-color: #ffffff; /* 设置背景色，可根据设计调整 */
  padding: 20px; /* 内边距，提升内容的可读性 */
  margin-left: 0px;
  margin-top: 150px;
}
/* 调整表单组件的宽度以适应.box大小 */
.maintenance-box .el-form-item__label {
  width: 60px; /* 根据需要调整label宽度 */
}

.maintenance-box .el-input,
.maintenance-box .el-textarea {
  width: 100%; /* 让输入框和文本区域宽度自适应容器 */
}

/* 调整文本区域的高度 */
.maintenance-box .el-textarea__inner {
  height: 120px; /* 根据需要调整文本区域高度 */
}

/* 如果需要调整字体大小 */
.maintenance-box {
  font-size: 14px; /* 根据需要调整字体大小 */
}
.upload-section {
  width: 500px;
  height: 500px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border: 1px solid #DCDFE6;
  border-radius: 4px; /* 给盒子添加圆角 */
  background-color: #ffffff; /* 设置背景色，可根据设计调整 */
  padding: 20px; /* 内边距，提升内容的可读性 */
  margin-left: 150px;
  margin-top: 150px;
  display: flex; /* 引入Flex布局 */
  flex-direction: column; /* 设置Flex方向为列 */
  justify-content: center; /* 垂直居中对齐 */
  align-items: center; /* 水平居中对齐 */
}
.upload-demo {
  width: 100%; /* 图片上传组件宽度100%，以适应容器 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 保证上传图标与提示文本居中 */
}

/* 确保提示文本也在上传框内居中 */
.el-upload__text {
  text-align: center;
}
.searchFunction{
  height: 28px;
  width: 80%;
  right: 40px;
}
/*头部边框阴影*/
.el-header{
  width: 100%;
}
.HomeChoose{
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0,0,0,0.1);
  display: flex;
}
.flex-grow {
  flex-grow: 0;
}
.IDpicture{
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%;/* 调整左右内边距 */
}
</style>